<template>
    <!-- 左侧头部 -->
  <div class="left-head" :class="isCollapse ? 'left-width': ''">
    <el-image
      v-if="!isCollapse"
      :src="head"
    >
      <template #error>
          <div class="image-slot">
            <el-icon><picture /></el-icon>
          </div>
        </template>
    </el-image>
    <el-image
      v-else
      style="width: 100%; padding-top: 15px; padding-left: 15px"
      :src="headlg"
    ></el-image>
  </div>
  <div class="slider" :class="isCollapse ? 'left-width': ''">
    <el-scrollbar class="scrollbar">
        <el-menu
          class="el-menu-vertical-demo"
            :default-active="path"
            router
            active-text-color="#11b9d0"
            :collapse="isCollapse"
            :unique-opened="true"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
            >
            <template v-for="item in menu" :key="item.permissionsId">
              <el-sub-menu :index="item.url"  v-if="item.children.length > 0">
                <template #title>
                  <el-image
                    style="height: 25px; width: 28px; padding-right: 15px;"
                    :src="item.img"
                  ></el-image>

                  <span>{{item.permissionsName}}</span>
                </template>

                <template v-for="item1 in item.children" :key="item1.permissionsId">
                  <!-- 二级有子菜单 -->
                  <el-sub-menu :index="item1.url" v-if="item1.children.length > 0" >
                    <template #title>
                      <span class="Dot"></span>
                      <span>{{item1.permissionsName}}</span>
                    </template>
                    <!-- 三层子菜单 -->
                    <el-menu-item
                        v-for="item2 in item1.children"
                        :key="item2.permissionsId"
                        :index="item2.url">
                        {{item2.permissionsName}}
                    </el-menu-item>
                  </el-sub-menu>
                  <!-- 2子菜单 -->
                  <el-menu-item  :index="item1.url" style="padding-left: 48px;">
                    <div class="dots">
                      <span class="Dot"></span>
                      <span>{{item1.permissionsName}}</span>
                      <span class="badge" v-if="item1.number > 0">{{item1.number}}</span>
                    </div>
                  </el-menu-item>
                </template>
              </el-sub-menu>
              <el-menu-item v-else :index="item.url" >
                <i :class="item.icon"></i>
                <el-image
                    style="height: 25px; width: 28px; padding-right: 15px;"
                    :src="item.img"
                  ></el-image>
                <span>{{item.permissionsName}}</span>
              </el-menu-item>
            </template>
        </el-menu>

    </el-scrollbar>
    <!-- 切换按钮 -->
    <div class="sidebar-btn" @click="switchIcon">
    <el-icon v-if="isCollapse"><fold /></el-icon>
    <el-icon style="transform: rotate(90deg);" v-else><fold /></el-icon>
    </div>
  </div>

</template>

<script lang="ts">
import { Fold, Picture} from '@element-plus/icons-vue'
import {defineComponent, onMounted, onUnmounted, PropType, ref, nextTick, watch} from 'vue'
import { useRoute, useRouter } from "vue-router"

import head from "../../assets/image/head.png"
import headlg from "../../assets/image/headlg.png"


type MockMenuType = {
  permissionsName: string,
  permissionsId: number,
  icon: string | null,
  url: string,
  children: MockMenuType[],
  img: string,
  number: number
}
export default defineComponent({
  components: {
    Fold,
    Picture
  },
  props: {
    menu: {
      type: Array as PropType<MockMenuType[]>,
    }
  },
  setup() {
    let isCollapse = ref(false)
    let left: any;
    let right: any;
    const route = useRoute();
    const router = useRouter();
    const path = ref()
    watch(() => route.path, (curPath, prevPath) => {
      path.value = curPath
    })
    
    onMounted(()=>{
      left = document.querySelector('.left');
      right = document.querySelector('.right');
    })

    let switchIcon = () => {
      isCollapse.value = !isCollapse.value
      if(isCollapse.value) {
        left.classList.add('left-content-width')
        right.classList.add('right-content-width')
      } else {
        left.classList.remove('left-content-width')
        right.classList.remove('right-content-width')
      }
    }
    let handleOpen = (index: any) => {
        console.debug('handleOpen', index)
    }
    let handleClose = (index: any) => {
        console.debug('handleClose', index)
    }
    let handleSelect = (i: string, ipath: string) => {
      console.debug('handleSelect', i, ipath)
    }
    // window.onresize = function(e){
    //   let x = document.documentElement.clientWidth;
    //   let y = document.documentElement.clientHeight;
    //   if(x <= 1100) {
    //     left.classList.add('left-content-width')
    //     isCollapse.value = true;
    //   } else {
    //     if(isCollapse.value) {
    //       return
    //     }
    //     left.classList.remove('left-content-width')
    //     isCollapse.value = false;
    //   }
    // }
    return {
      isCollapse,
      switchIcon,
      handleOpen,
      handleClose,
      handleSelect,
      onresize,

      router,
      route,
      path,

      head,
      headlg,
    }
  }

})
</script>

<style lang='scss' scoped>
.badge {
  height: 20px;
  width: 28px;
  line-height: 20px;
  border-radius: 10px;
  // background-color: #409eff;
  background-color: #f56c6c;
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: 5px;
}
</style>
